import React, { Component } from 'react'
import { connect } from 'react-redux'
// import store from '../store/index'
import Order from './Order'
import User from './User'
import { actions as userActions} from '../store/user/user'
import { actions as orderActions } from '../store/order/order'

class ReduxTem extends Component {
  render() {
    let {userInfo, setInfo, list, addList} = this.props;
    return (
      <div>
        {/* UI型组件和容器型组件 */}
        {/* UI型组件是默认的组件，功能简单，不能使用redux的方法，主要是数据的展示 */}
        {/* 容器型组件，需要通过connect方法转换而来，功能复杂，一般是父组件 */}
        <div>redux的拆分</div>
        <Order list={list} addList={addList}></Order>
        <User userInfo={userInfo} setInfo={setInfo}></User>
      </div>
    )
  }
}
// 将store中的state映射到组件的props中,用来获取数据
let mapStateToProps = (state) => ({
  userInfo: state.user.userInfo,
  list: state.order.list
})
// 将store中的dispatch映射到组件的props中，用来触发修改
let mapDispatchToProps = (dispatch, ownProps)=>({
  setInfo: (info)=>(dispatch(userActions.setInfo(info))),
  addList: (order)=>(dispatch(orderActions.addList(order)))
})
let Redux = connect(mapStateToProps, mapDispatchToProps)(ReduxTem);
export default Redux